<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <title>选择座位</title>

    <link rel="stylesheet" href="/movie/web/Public/jquery-weui/lib/weui.min.css">
    <link rel="stylesheet" href="/movie/web/Public/jquery-weui/css/jquery-weui.css">


    <link rel="stylesheet" href="/movie/web/Public/bootstrap/css/bootstrap.min.css">

    <script src="/movie/web/Public/jquery-weui/lib/jquery-2.1.4.js"></script>
    <script src="/movie/web/Public/jquery-weui/js/jquery-weui.js"></script>

    <script src="/movie/web/Public/jquery-weui/js/swiper.js"></script>

    <style>
        .weui_cell:before {
            content: " ";
            position: absolute;
            left: 0;
            right: 0;
            width:auto;
            height: 1px;
            border-top: 1px solid #D9D9D9;
            color: #D9D9D9;
        }
    </style>
</head>
<body>

<!--响应式布局图片-->
<style>
    .center-block {
        display: block;
        margin-right: auto;
        margin-left: auto;
    }

    .img-responsive {
        display: block;
        max-width: 100%;
        height: auto;
    }
</style>
<!-- <img src="img/banner1.png" class="img-responsive center-block" alt="Responsive image"> -->

<!--电影名称 和日期时间语言类型-->
<?php if(is_array($list)): foreach($list as $key=>$val): ?><header class='demos-header text-center'>
    <h3 class="demos-title"><?php echo ($val['name']); ?></h3>
    <h5 clas="demos-title">今天<?php  echo date('m月d号 H:i',$screening['showtime']) ?>&nbsp;&nbsp;&nbsp;<?php echo ($val['language']); ?></h5>
</header><?php endforeach; endif; ?>
<!--座位 for循环遍历出来的-->
<style>
    .weui-row {
        padding-top: 10px;
        padding-bottom: 30px;
        padding-left: 15px;
        padding-right: 15px;
        margin-top: 30px;
        background: #F2F1F6;
    }
    [class*="weui-col-20"] {
        margin-top: 20px;
        border: 1px solid #ccc;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background:#FFFFFF;
    }
    .zuo{
        height:400px;
    }
    .js_td{
        background: red;
    }
</style>
<div style=" background: #F2F1F6;padding-top: 30px;">
    <table cellpadding="0" cellspacing="5" style="width: 100%; text-align: center;">
        <?php
 for($i = 1;$i<9;$i++){ echo '<tr>'; for($j = 1;$j<9;$j++){ echo '<td>'; echo '<img data-selected="0" class="js-seat" row= "'.$i.'" col="'.$j.'"  src="/movie/web/Public/img/1.png" />'; echo '</td>'; } echo '</tr>'; } ?>
    </table>
</div>
<!-- 座位状态提示-->
<style>
    [class*="weui-col-33"] {
        margin-top: 20px;
        border: 1px solid #ccc;
        height: 40px;
        text-align: center;
        line-height: 40px;
        background: #FFFFFF;
    }
    .top{
        margin-top: 0px;
        height: 240px;
    }
</style>
<div class="weui-row top">
    <div class="weui-col-33"><img src="/movie/web/Public/img/1.png" alt="">未出售</div>
    <div class="weui-col-33"><img src="/movie/web/Public/img/2.png" alt="">已选中</div>
    <div class="weui-col-33"><img src="/movie/web/Public/img/3.png" alt="">已出售</div>
</div>

<!--确认按钮 未选择为灰色，选中座位为绿色-->
<div class='demos-content-padded'>
    <input type="submit" class="js-submit weui_btn weui_btn_default" value="确认选座" />
</div>
<script>

    var seatSell =<?php echo ($seatSell); ?>;
    var movie = <?php echo ($movie); ?>;
    var user = <?php echo ($user); ?>;
    var screening = <?php echo ($screening); ?>;
    var price=<?php echo ($price); ?>
    /*判断true*/
    function check(){
        var arr =  $(".js-seat[data-selected='1']");
        var b =  arr.length >0;
        return b;
    }

    $(function(){
        $(".js-seat").click(function(){
           /* 已卖出的，不处理*/
            if ($(this).attr('src')=='/movie/web/Public/img/3.png') {
                return false;
            }
            /*取的第一个匹配元素的属性值*/
            var selected = $(this).attr("data-selected");
            if(selected == "1"){
                $(this).attr('src','/movie/web/Public/img/1.png');
                $(this).attr("data-selected",0);
            }else{
                $(this).attr('src','/movie/web/Public/img/2.png');
                $(this).attr("data-selected",1);
            }
/*确认选座颜色切换*/
            if(check()){
                $(".js-submit").removeClass("weui_btn_default").addClass("weui_btn_primary");
            }else{
                $(".js-submit").removeClass("weui_btn_primary").addClass("weui_btn_default");
            }
        });
/*点击选座*/
        $(".js-submit").click(function(){
            if(check()==false){
                return;
            }
            //ajax
            var seatList = $(".js-seat[data-selected='1']");
            var arr=[];
            for(var i=0;i<seatList.length;i++){
                arr.push($(seatList[i]).attr("row")+','+$(seatList[i]).attr("col"));
            }

            $.ajax({
                type: "POST",
                url:"<?php echo U('Seat/add');?>",
                data: {'seat':arr, 'movie':movie, 'user':user, 'screening':screening, 'price':price},
                dataType: 'json',
                success: function (result) {
                    if (result.status) {
                        var str = "<?php echo U('Pay/index');?>";
                        window.location.href = str + "?id=" + result.orderId;
                    } else {
                        alert(result.mess);
                    }
                }
            });
        });
        //将已卖出的，做上标记
        for (var i = 0; i < seatSell.length; i++) {
            /*循环订单*/
            for(var a= 0;a<seatSell[i]['c'].length;a++){
              /* 循环订单中的座c（r排也可以）*/
                var c = seatSell[i]['c'][a];
                var r = seatSell[i]['r'][a];
                $(".js-seat[row='" + r + "'][col='" + c + "']").attr('src','/movie/web/Public/img/3.png');
            }



        }

    });

</script>
</body>
</html>